<template>
  <div class="container">
    <div id="exhart2" style="width: 100%; height: 100%"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import { getJysplbByMarketATy } from "../../util/home";
export default {
  name: "",
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      option: {},
      myChart: null,
    };
  },
  inject: ["currentMarketId"],
  computed: {},
  watch: {},
  mounted() {
    // this.getInit();
  },
  methods: {
    getInit() {
      getJysplbByMarketATy({ marketId: this.currentMarketId() }).then((res) => {
        let myChart = echarts.init(document.getElementById("exhart2"), null, {
          devicePixelRatio: 2.5,
        });
        myChart.clear();
        let datas = res.data.data;
        datas.forEach((item) => {
          item.value = item.bfb;
        });
        console.log("datas=", datas);

        this.option = {
          tooltip: {
            trigger: "item",
            formatter: function (params) {
              // 提示框浮层内容格式器
              return params.name + "   " + params.value + "%";
            },
            position: ["43%", "33%"],
            // position:'right',
            backgroundColor: "transparent",
            borderColor: "transparent",
            boxShadow: "none",
            textStyle: {
              color: "#fff", // 提示框文本颜色
              fontSize: 16, // 提示框文本字体大小
            },
            borderWidth: 0,
            padding: 0,
          },
          legend: {
            bottom: "0%",
            itemHeight: 8,
            itemWidth: 8,
            icon: "rect",
            textStyle: {
              color: "#fff",
            },
            data: datas,
            formatter: (name) => {
              if (datas.length) {
                const item = datas.filter((item) => item.name === name)[0];
                return item.name + item.value + "%   " + item.jylsum + "kg";
              }
            },
          },
          series: [
            {
              name: "交易商品类别",
              type: "pie",
              radius: ["40%", "70%"],
              center: ["50%", "40%"],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 5,
                borderColor: "#fff",
                borderWidth: 1,
              },
              label: {
                show: false,
                position: "center",
                fontSize: 14, // 标签字体大小
                color: "#fff",
                // formatter: function (params) {
                //   return params.name + params.value + "%";
                // }, // 标签格式化
              },
              labelLine: {
                show: true,
              },
              data: datas,
            },
          ],
        };

        myChart.setOption(this.option);
        let currentIndex = -1;
        setInterval(() => {
          let dataLen = datas.length;
          // 取消高亮显示
          myChart.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
            dataIndex: currentIndex,
          });
          currentIndex++;
          if (currentIndex == dataLen) {
            currentIndex = -1;
          }
          // 高亮显示当前项
          myChart.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: currentIndex,
          });
          myChart.dispatchAction({
            type: "showTip",
            seriesIndex: 0,
            dataIndex: currentIndex,
          });
          // 判断是否需要换行
        }, 2000);
        myChart.setOption(this.option);

        window.addEventListener("resize", function () {
          myChart.resize();
        });
      });
    },
  },
};
</script>
<style lang="less" scoped>
.container {
  height: 100%;
  display: flex;
}
</style>
